<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜品管理系统</title>
    <link href="css/list.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1 class="page-title">菜品管理</h1>

    <div class="action-bar">
        <div class="buttons">
            <button class="btn btn-primary"><a href="addFoodType.jsp">新增菜品</a></button>
            <button class="btn btn-danger" id="batchDeleteBtn" style="margin-left: 10px;">批量删除</button>
        </div>
        <div class="search-box">
            <input type="text" name="tname" placeholder="输入菜品名称搜索">
            <button class="btn btn-primary">搜索</button>
        </div>
    </div>

    <table class="data-table">
        <tr class="row">
            <th style="width: 80px;">选择</th>
            <th>菜名</th>
            <th>类型</th>
            <th style="width: 150px;">操作</th>
        </tr>
    </table>
    <script>
        let length = 8;
        var arr = [["宫保鸡丁", "川菜"], ["鱼香肉丝", "川菜"], ["北京烤鸭", "京菜"], ["麻婆豆腐", "川菜"],
        ["红烧肉", "鲁菜"], ["糖醋排骨", "浙菜"], ["水煮鱼", "川菜"], ["佛跳墙", "闽菜"], ["东坡肉", "浙菜"]];
        var size = arr.length;
        var pages = parseInt(size / length) + (size % length != 0);
        var index = 0;
        function createTr(tmp){
            return`            <tr>
            <td><input type="checkbox" name="ids" class="checkbox" value="\${tmp[0]}"></td>
            <td>\${tmp[0]}</td>
            <td><span class="type-tag">\${tmp[1]}</span></td>
            <td class="action-cell">
                <span class="btn btn-danger btn-sm">删除</span>
                <span class="btn btn-outline btn-sm">编辑</span>
                </td>
            </tr>`;
        }
    </script>

    <div class="pagination">
        <div class="pagination-info">总共<span id="size"></span>条记录，当前在第<span id="page"></span>页，共<span id="pages"></span>页</div>
        <div class="pagination-links">
            <span class="changePage start">首页</span>
            <span class="changePage prev">上一页</span>
            <span class="page active">1</span>
            <span class="page">2</span>
            <span class="page">3</span>
            <span class="changePage pext">下一页</span>
            <span class="changePage end">尾页</span>
        </div>
    </div>
    <script>
        var table = document.getElementsByTagName("table")[0];
        var allSize = document.getElementById("size");
        var nowPage = document.getElementById("page");
        var allPage = document.getElementById("pages");
        function init(){
            for(var i=0;i<size;i++){
                table.innerHTML += createTr(arr[i]);
            }
            allSize.innerText = size;
            nowPage.innerText = index + 1;
            allPage.innerText = pages;
        }
        init();
    </script>
</div>
</body>
</html>
